<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=yes">

    <meta content="telephone=yes,email=yes" name="format-detection">
    <!--//自动识别电话号码和邮箱-->

    <meta content="yes" name="apple-mobile-web-app-capable">
    <!--//苹果手机：会删除默认的工具栏和菜单栏，网站开启对web app程序的支持-->
    <meta name="apple-mobile-web-app-status-bar-style" content="default"/>
    <!--//苹果手机：在web app应用下状态条（屏幕顶部条）的颜色,默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。-->
    <meta name="apple-touch-fullscreen" content="yes"/>
    <!--//苹果手机：如果把一个web app添加到了主屏幕中，那么从主屏幕中打开这个web app则全屏显示-->
    <link rel="apple-touch-icon" href="images/HTML5_Badge_64.png"/>
    <!--//苹果手机：将应用添加到手机主屏幕，会有一个icon可以直接进入-->
    <title>有收入</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <!--初始化样式-->
    <link rel="stylesheet" href="css/reset.css">
    <!--共用样式-->
    <link rel="stylesheet" href="css/common.css">
    <!--整个网站的局部样式-->
    <link rel="stylesheet" href="css/style.css">
    <!--适配样式-->
    <link rel="stylesheet" href="css/styleMedia.css">
    <style>
        html, body {
            position: relative;
            overflow-x: hidden;
        }
        .img-row{
        	float: right;
        }
        .fileBtn {
            width: 1rem;
            height: 1rem;
            border: 0.01rem solid #d3d3d3;
            text-align: center;
            position: relative;
             left: 0rem;
            /* right: 0; */
            display: flex;
            /* top: 0; */
            /* justify-content: space-between; */
            align-items: center;
            justify-content: center;
        }
        .hide {
        	display: none;
        	height: 0;
        }
    </style>
</head>
<body style="background-color: #ffffff;">

<!--header begin-->
<header>
    <div id="flexHeader">
        <div class="div1 mui-action-back"><a><img src="images/icon_arrow_left.png"></a></div>
        <div class="div2">(<span id="title">手机淘宝任务-已完成</span>-浏览)</div>
        <div class="div3"></div>
    </div>
</header>
<!--header end-->

<!--Merchant merchandise begin-->
<article class="merchant-merchandise height-padding">
    <div class="businessId">商家ID:<span>117987</span></div>
    <main>
        <div><img id="goods1Pic" src="images/img_commodity.png"></div>
        <aside>
            <div>商品目标：<span id="goodsName"></span></div>
            <div>搜索展示价格：<span id="phonePrice">129元</span></div>
            <div><span>普通浏览+加购物车</span></div>
        </aside>
        
    </main>
</article>
<!--Merchant merchandise end-->

<!--taoBao task shop notes begin-->
<article class="task-remark">
    <aside>
        <section>
            <div>
            	<img id="logo" src="images/img_taobao.png">
            </div>
            <div>任务状态:<span id="status">待操作</span></div>
        </section>
        <div id="timeCount" class="time-of-submission">提交倒计时：01:50:40</div>
        <!--<div class="time-of-submission">请等待卖家确认，一般会在一个工作日内完成</div>-->
    </aside>
    <main>
        <div><p>商家备注(长按课选择-复制)要求:</p></div>
        <div id="remarkInfo">这是一条很长很长很长很长很长很长很长很长很长很长很长很...........长的商家备注，长到冒省略号啦~</div>
    </main>
</article>
<!--taoBao task shop notes end-->

<!--accept an assignment begin-->
<article class="accept-an-assignment">
    <section class="task-top">
        <div>
            <img src="images/icon_one.png">
            <p>接受任务</p>
        </div>
        <time id="orderCt" datetime="2018-10-20 &nbsp; 11:55:55"></time>
    </section>
    <section class="serial-number">
        <div>
            <p>任务编号</p>
            <p id="orderId">2345254</p>
        </div>
        <div>
            <p>买号</p>
            <p id="tbName">淘宝账号</p>
        </div>
    </section>
</article>
<!--accept an assignment end-->

<!-- operating duty begin-->
<article class="operating-duty">
    <section class="task-top">
        <div>
            <img src="images/icon_two.png">
            <p>操作任务</p>
        </div>
    </section>
    <section class="list-img">
        <div>
            <p>搜索列表</p>
            <aside>
                <img src="" class="img-row" id="SEARCH_RESULT" />
            </aside>
        </div>
        <div>
            <p>浏览店铺</p>
            <aside>
                <img src="" class="img-row" id="SHOP_GOODS" />
                <img src="" class="img-row" id="TARGET_GOODS_HEADER" />
                <img src="" class="img-row" id="TARGET_GOODS_FOOTER" />
            </aside>
        </div>
        <div>
            <p>加入购物车</p>
            <aside>
                <img src="" class="img-row" id="SHOPPING_CART" />
            </aside>
        </div>
    </section>
</article>
<!-- operating duty end-->

<!--Mission accomplished begin-->
<article class="mission-accomplished accept-an-assignment">
    <section class="task-top">
        <div>
            <img src="images/icon_five.png">
            <p>任务完成</p>
        </div>
        <time id="completeTime" datetime="2018-10-20&nbsp;11:55:55"></time>
    </section>
    <section class="serial-number">
        <div>
            <p>获取佣金</p>
            <p id="customerReceive">10金</p>
        </div>
    </section>
</article>
<!--Mission accomplished end-->

<!--taskTabBar begin-->
<article class="taskTabBar">
    <div id="btnOperation" style="background-color: #d3d3d3;">操作任务</div>
    <!--<div>申诉任务</div>-->
    <div id="btnCancel" style="background-color: #d3d3d3; color: #ffffff;border: 0.01rem solid #d3d3d3">取消任务</div>
</article>
<!--taskTabBar end-->

<!--js-->
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/common.js"></script>
<script src="js/config.js"></script>
<script src="js/UploadImg.js"></script>
<script src="js/vconsole.min.js"></script>
<script>
	
	var v = new VConsole()
	var last = 0
    
	var ORDER_STATUS = {
		TIMEOUT: -4, // 订单超时关闭
		CANCEL: -3, // 用户取消订单
		INOPERATION: 0, // 待操作
		OPERATIONING: 1, // 操作中
		NOTCOMPLETED: 4, // 待确认
		COMPLETED: 5, // 已完成
	}
    
	var IMAGE_TAG = {
		SEARCH_RESULT: 1, // 搜索结果页
		SHOP_GOODS: 2, // 任意商品
		TARGET_GOODS_HEADER: 3, // 目标商品头部
		TARGET_GOODS_FOOTER: 4, // 目标商品尾部
		SHOPPING_CART: 5, // 购物车
	}
	
	var CURRENT_ORDER_ID
	$(function(){
		CURRENT_ORDER_ID = getUrlParam('orderId')
		console.log("当前面板--浏览任务id：" + CURRENT_ORDER_ID)
		$.ajax({
			url: $CONFIG.baseUrl + "/api/order/getOrderById",
			type: 'get',
			data:{orderId: CURRENT_ORDER_ID},
			beforeSend:function(x){
				x.setRequestHeader("Authorization", localStorage.getItem('token'))
			},
			success: function(data){
				console.log(JSON.stringify(data))
				initParameter(data.data)
				initImg(data.data)
				initBtn(data.data)
			},
			errror: function(error){
				console.log('error')
			}
		})
	})
	
	function initParameter(data) {
		var status = "";
		switch(data.status)
		{
			case ORDER_STATUS.TIMEOUT: // 超时关闭
				status = "超时关闭"
				break
			case ORDER_STATUS.CANCEL: // 用户取消
				status = "已取消"
				break
			case ORDER_STATUS.INOPERATION: // 待操作
				status = "待操作"
				break
			case ORDER_STATUS.OPERATIONING: // 操作中
				status = "操作中"
				break
			case ORDER_STATUS.NOTCOMPLETED: // 待确认
				status = "待确认"
				break
			case ORDER_STATUS.COMPLETED: // 已完成
				status = "已完成"
				break
			default:
			  status = ""
		}
		var platform_logo = ''
		switch (data.platformId){
			case 1:
			  platform_logo = "icon_taobao.png";
			  break;
			case 3:
			  platform_logo = "icon_jd.png";
			  break;
			case 4:
			  platform_logo = "icon_alibaba.png";
			  break;
			case 5:
			  platform_logo = "icon_pdd.png";
			  break;
			case 6:
			  platform_logo = "icon_mls.png";
			  break;
			case 7:
			  platform_logo = "icon_mgj.png";
			  break;
		}
		
		// 标题栏
		$('#title')[0].textContent = data.taskName + "-" + status
		// 商品1图片
		$('#goods1Pic')[0].src = _getImgUri(data.goods1Pic)
		// 商品名称
		$('#goodsName')[0].textContent = data.goodsName
		// 搜索价格
		$('#phonePrice')[0].textContent = data.phonePrice + "元"
		// 平台logo
		$("#logo").attr('src','images/' + platform_logo); 
		// 状态
		$('#status')[0].textContent = status
		// 商家备注
		$('#remarkInfo')[0].textContent = data.remarkInfo
		// 任务编号
		$('#orderId')[0].textContent = data.orderId
		// 买家
		$('#tbName')[0].textContent = data.tbName
		// 获取佣金
		$('#customerReceive')[0].textContent = data.customerReceive + "金 "
		
		// 接受时间
		if (data.orderCt != null) {
			$('#orderCt')[0].textContent = data.orderCt
		}
		// 完成时间
		if (data.status == ORDER_STATUS.COMPLETED && data.mt != null) {
			$('#completeTime')[0].textContent = data.mt
		}
	}
	
	function initImg(data) {
		_display(data, 'SEARCH_RESULT')
		_display(data, 'SHOP_GOODS')
		_display(data, 'TARGET_GOODS_HEADER')
		_display(data, 'TARGET_GOODS_FOOTER')
		_display(data, 'SHOPPING_CART')
	}
	
	function initBtn(data) {
		checkTimeCount(data)
		switch(data.status)
		{
			case ORDER_STATUS.INOPERATION: // 待操作
			case ORDER_STATUS.OPERATIONING: // 操作中
				if (last > 0) { // 是否超时
					// 激活操作按钮
					$('#btnOperation').click(function(){
						operation(CURRENT_ORDER_ID)
					})
					$('#btnOperation').removeAttr("style")
					// 激活取消任务按钮
					$('#btnCancel').click(function(){
						cancelOrder(CURRENT_ORDER_ID)
					})
					$('#btnCancel').removeAttr("style")
				}
				break
			case ORDER_STATUS.INREFUND: // 待返款
				// 激活重新上传按钮
				// 激活催返款按钮
				$('#btnRebate').css("background", "#1E81D2").css("color", "#fff")
				$('#btnRebate').click(function(){
					rebate(CURRENT_ORDER_ID)
				})
				break
			case ORDER_STATUS.INEVALUATE: // 待评价
				// 激活上传评价按钮，btnEvaluation
				$('#btnEvaluation').removeAttr("style")				
				$('#btnEvaluation').click(function(){
					evaluation(CURRENT_ORDER_ID)
				})
				// 切换图片框组合
				$('#refunded').css("display", "flex")	
				$('#inrefund').css("display", "none")			
				break
			default:
			  status = ""
		}
	}
	
	/**
	 * 倒计时检测
	 */
	function checkTimeCount(data) {
		if (data.status == ORDER_STATUS.INOPERATION || data.status == ORDER_STATUS.OPERATIONING) {
			var t = new Date()
			var nowTime = Date.parse(t)
			var deadLineTime = Date.parse(new Date(data.orderCt)) + 1 * 1000 * 60 * 60 // 默认接单后2个小时之内
			if (deadLineTime > nowTime) { // 还未到截止时间
				last = deadLineTime - nowTime
				_count()
			} else {
				_timeout()
			}
		} else {
			$('#timeCount')[0].textContent = ""
		}

	}
	
	function _count() {
    	if (last < 0) {
    		_timeout()
    		return
    	}
		h = parseInt(last / 1000 / 60 / 60) + ':';
		m = parseInt(last / 1000 / 60 % 60) + ':';
		s = parseInt(last / 1000 % 60) ; 
		last = last-1000
		setTimeout("_count()", 1000)
		
		$('#timeCount')[0].textContent = "提交倒计时：0" + h + (m < 10 ? ("0" + m) : m ) + (s < 10 ? ("0" + s) : s)
    }
	
	function _timeout() {
		$('#timeCount')[0].textContent = "提交倒计时：已超时"
		// 超时，禁用操作按钮
		$('#btnOperation').unbind()
		$('#btnOperation').css("background-color", "#d3d3d3")
		// 超时，禁用取消任务按钮 
		$('#btnCancel').unbind()
		$('#btnCancel').css("background-color", "#d3d3d3")
						.css("color", "#ffffff")
						.css("border", "0.01rem solid #d3d3d3")
		console.log("订单已超时");
		plus.nativeUI.toast("订单已超时")
	}
	
	function operation(id) {
		console.log('operation begin ' + id)
		$.ajax({
			url: $CONFIG.baseUrl + "/api/order/operation",
			type: 'post',
			data:{orderId: id},
			beforeSend: function(x){
				x.setRequestHeader("Authorization", localStorage.getItem('token'))
			},
			success: function(data){
				console.log(this.url)
				window.location = "operationTask_browse.html?orderId=" + id
			},
			errror: function(error){
				console.log('error')
			}
		})
	}
	/**
	 * 取消订单
	 * @param {Object} id
	 */
	function cancelOrder(id) {
		console.log('cancel begin ' + id)
		window.location = "cancelTask.html?type=1&id=" + id
	}
	
	// 显示图片
	function _display(data, imgName) {
		var imageUrl
		$.each(data.orderImageList, function(index, value) { 
			if (value.tag == IMAGE_TAG[imgName]) {
				imageUrl = value.url
			}
		})
		if (imageUrl == null) return;
		$("#" + imgName).attr("src", function() {
			$("#" + imgName)[0].style.display = 'block'
			return _getImgUri(imageUrl)
		})
	}
	
	function _getImgUri(img) {
		return $IMG_CONF + img
	}
</script>
</body>
</html>